<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<style>
	html{
		background-color: rgba(217,217,217,0.80);
		margin: 0;
		padding: 0;
	}
	.box{
		width:800px;
		height: 110px;
		margin: 10px auto;
		display: flex;
		justify-content: center;
		align-content: center;
		
	}
	.base_boxface{
		width:100px;
		height: 100px;
		background-color: black;
		margin: 5px;
		border-radius: 5px;
	}
	.boxface{
		display:flex;
	}
	.dot{
		width: 30px;
		height: 30px;
		background-color: white;
		border-radius: 50%
	}
	.column{
		width: 100%;
		height: 33.3%;
	}
</style>
<body>
	<div class="box">
		<div class="boxface base_boxface">
			<div class="dot"></div>
		</div>
		<div class="base_boxface boxface" style="justify-content: center">
			<div class="dot"></div>
		</div>
		<div class="base_boxface boxface" style="justify-content: flex-end">
			<div class="dot"></div>
		</div>
		<div class="base_boxface boxface" style="justify-content: space-between">
			<div class="dot"></div>
			<div class="dot"></div>
		</div>
		<div class="base_boxface">
			<div class="column boxface" style="justify-content: flex-end">
				<div class="dot"></div>
			</div>
			<div class="column boxface"></div>
			<div class="column boxface" style="justify-content: flex-end">
				<div class="dot"></div>
			</div>
		</div>
		<div class="base_boxface">
			<div class="column boxface">
				<div class="dot"></div>
			</div>
			<div class="column boxface" style="justify-content: center">
				<div class="dot"></div>
			</div>
			<div class="column boxface" style="justify-content: flex-end">
				<div class="dot"></div>
			</div>
		</div>
		<div class="base_boxface">
			<div class="column boxface" style="justify-content: space-between">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="column boxface" style="justify-content: center">
				<div class="dot"></div>
			</div>
			<div class="column boxface" style="justify-content: space-between">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
		</div>
	</div>
	<div class="box">
		<div class="base_boxface boxface" style="align-items: center;justify-content: flex-start">
			<div class="dot"></div>
		</div>
		<div class="base_boxface boxface" style="justify-content: center;align-items: center">
			<div class="dot"></div>
		</div>
		<div class="base_boxface boxface" style="justify-content: flex-end;align-items: center">
			<div class="dot"></div>
		</div>
		<div class="base_boxface boxface" style="flex-direction: column;justify-content: space-between">
			<div class="dot"></div>
			<div class="dot"></div>
		</div>
		<div class="base_boxface">
			<div class="column "></div>
			<div class="column "></div>
			<div class="column boxface" style="justify-content: space-between">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
		</div>
		<div class="base_boxface">
			<div class="column boxface" style="justify-content: space-between">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="column "></div>
			<div class="column boxface" style="justify-content: space-between">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
		</div>
		<div class="base_boxface">
			<div class="column boxface" style="justify-content: space-between">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="column boxface" style="justify-content: space-between">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="column boxface" style="justify-content: space-between">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
		</div>
	</div>
	<div class="box">
		<div class="base_boxface boxface" style="align-items: flex-end;">
			<div class="dot"></div>
		</div>
		<div class="base_boxface boxface" style="align-items: flex-end;justify-content: center">
			<div class="dot"></div>
		</div>
		<div class="base_boxface boxface" style="align-items: flex-end;justify-content: flex-end">
			<div class="dot"></div>
		</div>
		<div class="base_boxface">
			<div class="column boxface">
				<div class="dot"></div>
			</div>
			<div class="column boxface" style="justify-content: center">
				<div class="dot"></div>
			</div>
		</div>
		<div class="base_boxface">
			<div class="column boxface">
				<div class="dot"></div>
			</div>
			<div class="column boxface" style="justify-content: flex-end">
				<div class="dot"></div>
			</div>
		</div>
		<div class="base_boxface">
			<div class="column boxface">
				<div class="dot"></div>
			</div>
			<div class="column boxface"></div>
			<div class="column boxface" style="justify-content: flex-end">
				<div class="dot"></div>
			</div>
		</div>
		<div class="base_boxface">
			<div class="column boxface" style="justify-content: space-between">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="column boxface" style="justify-content: center">
				<div class="dot"></div>
			</div>
			<div class="column boxface" style="justify-content: space-between">
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
		</div>
	</div>
</body>
</html>
